<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router';

const props = defineProps(['pageName'])
const router = useRouter()



// console.log(router.currentRoute.value)
const nav_list = ref(getNavList(router.currentRoute.value.matched, router.currentRoute.value.params))
// console.log(nav_list.value)

watch(router.currentRoute, (newCurrentRoute) => {
    nav_list.value = getNavList(newCurrentRoute.matched, newCurrentRoute.params)
    // console.log("router", newCurrentRoute.matched)
    // console.log("nav_list", nav_list.value)
})


// param is router.currentRoute.value.matched(raw data) and router.currentRoute.value.params(raw data)
function getNavList(matched, params) {
    const nav = [];
    matched.reduce((n, r) => {
        if(n.length > 0 && n[n.length-1].path == r.path) {
            return n
        } 
        n.push({path: r.path, name: r.name})
        return n
        
    }, nav)

    // embedding parameter
    nav.forEach((v, i, a) => {
        Object.keys(params).forEach(p => {
            a[i].path = v.path.replace(`:${p}`, params[p])
        })
    })
    return nav
}

function goBack() {
    if (nav_list.value.length > 1) {
        router.replace({path: nav_list.value[nav_list.value.length-2].path})
    }
}

</script>

<template>
    <div class="breadcrumb">

        <div class="breadcrumb-back" @click="goBack()" v-show="nav_list.length>1" >
            <img src="/src/assets/images/student/arrow-left-bold.svg" alt="Arrow-left" width="32">
        </div>
        <ul class="breadcrumb-list">
            <li v-for="(item, index) in nav_list" ><span>{{$t(`${props.pageName}.breadcrumb.${item.name}`)}}</span></li>
            
        </ul>
    </div>
</template>


<style scoped>

.breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
}

.breadcrumb-back {
    text-align: center;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
}

.breadcrumb-list {
    list-style: none;
    height: 32px;
    line-height: 32px;
}


.breadcrumb-list li {
    display: inline-block;
    color: black;
    
}


/* .breadcrumb-list li span {
    color: blue;
    cursor: pointer;
} */
.breadcrumb-list li:last-of-type span {
    cursor: default;
    color: black;
} 


.breadcrumb-list li+li::before {
    display: inline-block;
    content: '/';
    padding: 0 10px 0 10px;
}



</style>